import { HotWangzhanRes, SchoolResData, ScreenOtherRes, WeekDataRes } from "@/api/types/dataAsset";
import { EChartsOption } from "echarts";

// 数据采集趋势
export function createWeekEchartsOption(apiData: WeekDataRes): EChartsOption {
  const option: EChartsOption = {
    xAxis: {
      type: 'category',
      data: apiData[1]['学校'].map(item => item.createDate),
      axisTick: { show: false }
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '房产',
        type: 'line',
        data: apiData['0']['房产'].map(item => item.num),
        itemStyle: {
          color: '#468EFF'
        },
        smooth: true
      },
      {
        name: '学校',
        type: 'line',
        data: apiData[1]['学校'].map(item => item.num),
        itemStyle: {
          color: '#468EFF'
        },
        smooth: true
      },
      {
        name: '美团商家',
        type: 'line',
        data: apiData[2]['美团商家'].map(item => item.num),
        itemStyle: {
          color: '#40CFD6'
        },
        smooth: true
      },
      {
        name: '其他',
        type: 'line',
        data: apiData[3]['其他'].map(item => item.num),
        itemStyle: {
          color: '#EF9CBB'
        },
        smooth: true
      }
    ],
    legend: {
      show: true,
      top: 0,
      right: 15
    },
    grid: {
      containLabel: true,
      top: 30,
      left: 15,
      right: 15,
      bottom: 15
    },
    tooltip: {
      axisPointer: {
        axis: 'y'
      }
    }
  }

  return option
}

// 学校数据采集总量
export function createSchoolEchartsOption(apiData: SchoolResData, mapId: string) {
  const setRegions = (composeOptions: ReturnType<typeof resolveApiData>) => {
    const regions: Record<string, any>[] = []

    composeOptions.forEach(option => {
      option.data.map(item => {
        regions.push({
          name: item.latnName,
          itemStyle: {
            areaColor: option.color
          },
          emphasis: {
            itemStyle: {
              areaColor: option.color
            },
            label: {
              color: '#fff'
            }
          }
        })
      })
    })

    return regions
  }
  
  // 数据分割
  const resolveApiData = (data: SchoolResData) => {
    const filterLatnName = '合计'
    // 前三
    const cloneSchoolData = (JSON.parse(JSON.stringify(data)) as SchoolResData).filter(
      item => item.latnName !== filterLatnName
    ),
    cloneSchoolLength = cloneSchoolData.length
  
    cloneSchoolData.sort((a, b) => b.total - a.total)
    // 前三：
    const firstThreeData = cloneSchoolData.slice(0, 3)
    // 中间
    const middleData = cloneSchoolData.slice(3, cloneSchoolLength - 3)
    // 后三
    const backThreeData = cloneSchoolData.slice(cloneSchoolLength - 3, cloneSchoolLength)

    const composeOptions = [
      { data: firstThreeData, color: '#E6585F' },
      { data: middleData, color: '#40CFD6' },
      { data: backThreeData, color: '#34A838' }
    ]

    return composeOptions
  }

  const option = {
    geo: {
      // 使用 registerMap 注册的地图名称。
      map: mapId,
      roam: false,
      label: {
        show: true,
        color: '#fff',
        position: 'inside',
        fontSize: 12
      },
      itemStyle: {
        areaColor: '#E3E3E3',
        borderColor: '#fff',
        borderWidth: 2
      },
      regions: setRegions(resolveApiData(apiData)),
      layoutCenter: ['50%', '50%'],
      layoutSize: '100%'
    }
  } as EChartsOption

  return option
}

// 热门网站采集数量
export function createHotwangzhanEchartsOption(apiData: HotWangzhanRes): EChartsOption {
  const total = apiData.reduce((prev, item) => (prev + item.num), 0)

  const option: EChartsOption = {
    xAxis: {
      type: 'category',
      data: [...apiData.map(item => item.name), '合计'],
      axisTick: { show: false }
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        type: 'bar',
        name: '热门网站',
        data: [...apiData.map(item => item.num), {
          value: total,
          itemStyle: {
            color: '#D1D1D1'
          }
        }],
        itemStyle: {
          color: '#48D0FF'
        },
        label: {
          show: true,
          position: 'top'
        }
      }
    ],
    grid: {
      containLabel: true,
      top: 30,
      left: 15,
      right: 15,
      bottom: 15
    },
  }

  return option
}

// 其他数据采集
export function createOtherEchartsOption(apiData: ScreenOtherRes): EChartsOption {
  const seriesPieData = apiData.map(item => ({ name: item.type, value: item.num }))

  const option = {
    title: {
      text: '数据类型分布',
      left: '30%',
      top: 'middle',
      textStyle: {
        fontSize: '16px',
        color: '#348CFD',
        fontWeight: 'normal'
      }
    },
    series: [
      {
        type: 'pie',
        data: seriesPieData,
        center: ['40%', '50%'],
        radius: ['40%', '60%'],
        avoidLabelOverlap: false,
        minAngle: 30,
        labelLine: {
          show: false
        },
        label: {
          show: false
        }
      }
    ],
    legend: {
      orient: 'vertical',
      top: 'middle',
      right: '10',
    },
    tooltip: {
      show: true
    }
  } as EChartsOption

  return option
}